<template>
	<view style="background-color: #f1f1f1;height: 100vh;">
		<u-search v-model="keyword" :showAction="true" actionText="搜索"
		 :animation="false" placeholder="单号关键字搜索" @custom="custom"></u-search>
		
		<view class="tab_nav">
			<view class="navTitle" v-for="(item,index) in navList" :key="index" >
				<view :class="{'active':isActive === index}" @click="checked(index)">
				{{item.title}}<text style="color: red;">({{item.length}})</text>
				</view>
			</view>
		</view>
			<view class="nav_item" v-if="isActive==0">
				<view class="newBxBox">
					<view class="top">
						<text>待提交<text style="color: red;">({{oneLength}})</text>
						</text>
					</view>
					<view class="container" v-for="(item, index) in resR" :key="index">
						<view class="container-left"></view>
						<view class="container-right">
							<view class="z" style="width: 70%;">
								<p style="font-size: 20rpx;padding-left: 20rpx;margin-top: 15rpx;">申请单：{{item.YSSQNUM}}</p>
								<p style="font-size: 20rpx;padding-left: 20rpx;margin-top: 15rpx;">状态：{{item.YSTAT}}</p>
								<p style="font-size: 28rpx;padding-left: 20rpx;">领料人：{{item.YUSR}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">单据日期：{{item.YDAT}}</p>
							</view>
							<view class="y" @click="wslGotoCd(item)">
								<p style="font-size: 24rpx;color: #13d5f6; margin-top: 40rpx;margin-left: 50rpx;">去处理 ></p>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nav_item" v-if="isActive==1">
				<view class="newBxBox">
					<view class="top">
						<text>已提交<text style="color: red;">({{oneLength2}})</text>
						</text>
					</view>
					<view class="container" v-for="(item, index) in twoData" :key="index">
						<view class="container-left"></view>
						<view class="container-right">
							<view class="z" style="width: 70%;">
								<p style="font-size: 20rpx;padding-left: 20rpx;margin-top: 15rpx;">申请单：{{item.YSSQNUM}}</p>
								<p style="font-size: 20rpx;padding-left: 20rpx;margin-top: 15rpx;">状态：{{item.YSTAT}}</p>
								<p style="font-size: 28rpx;padding-left: 20rpx;">领料人：{{item.YUSR}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">单据日期：{{item.YDAT}}</p>
							</view>
							<view class="y" @click="wslGotoCd(item)">
								<p style="margin-left: 40rpx;font-size: 24rpx;color: #13d5f6; margin-top: 50rpx;">详情 ></p>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nav_item" v-if="isActive==2">
				<view class="newBxBox">
					<view class="top">
						<text>已关闭<text style="color: red;">({{oneLength2}})</text>
						</text>
					</view>
					<view class="container" v-for="(item, index) in twoData2" :key="index">
						<view class="container-left"></view>
						<view class="container-right">
							<view class="z" style="width: 70%;">
								<p style="font-size: 20rpx;padding-left: 20rpx;margin-top: 15rpx;">申请单：{{item.YSSQNUM}}</p>
								<p style="font-size: 20rpx;padding-left: 20rpx;margin-top: 15rpx;">状态：{{item.YSTAT}}</p>
								<p style="font-size: 28rpx;padding-left: 20rpx;">领料人：{{item.YUSR}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">单据日期：{{item.YDAT}}</p>
							</view>
							<view class="y" @click="wslGotoCd(item)">
								<p style="margin-left: 40rpx;font-size: 24rpx;color: #13d5f6; margin-top: 50rpx;">详情 ></p>
							</view>
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				YSSQNUM:'',
				isActive: 0,
				resR:[],
				twoData:[],
				twoData2:[],
				navList:[
					{
						index: 0,
						title: '待提交',
						length: 0,
					},{
						index: 1,
						title: "已提交",
						length: 0,
					},{
						index: 2,
						title: "已关闭",
						length: 0,
					},
				],
				userInfo: {},
				oneLength:0,
				oneLength2:0,
				oneLength3:0,
				dataList:[],
			}
		},
		created() {
		  this.checked(this.isActive);  // 根据当前标签的索引调用对应的接口
		},
		onLoad(query) {
			this.userInfo = uni.getStorageSync('userInfo')
		},
		methods: {
			async custom(val){
				this.YSSQNUM=val;
				this.checked(this.isActive)
				
			},
			async checked(index) {
				this.isActive = index
				let GRP1 = {
						GRP1: [{
								YSSQNUM:this.YSSQNUM,
						}]
				}
				let res = await this.$api.x3.x3request("WSLISTSSQH",GRP1)
					// 请求成功的处理逻辑
					let resR1 = JSON.parse(res.message)
					this.dataList= resR1.GRP1
					this.resR=[]
					this.twoData=[]
					this.twoData2=[]
					for (var i = 0; i < this.dataList.length; i++) {
						if(this.dataList[i].YSTAT=="1"){
							this.dataList[i].YSTAT="待提交"
						}else if(this.dataList[i].YSTAT=="2"){
							this.dataList[i].YSTAT="已提交"
						}else{
							this.dataList[i].YSTAT="已关闭"
						}
						if(this.dataList[i].YSTAT=="待提交"){
							 
							this.resR.push(this.dataList[i])
						}else if(this.dataList[i].YSTAT=="已提交"){
							this.twoData.push(this.dataList[i])
						}else{
							this.twoData2.push(this.dataList[i])
						}
					}
					this.oneLength = this.resR.length
					this.oneLength2 = this.twoData.length
					this.oneLength3 = this.twoData2.length
					this.navList[0].length = this.oneLength
					this.navList[1].length = this.oneLength2
					this.navList[2].length = this.oneLength3
			},
			wslGotoCd(a){
				uni.navigateTo({url:"/pages/yssqPages/yssqPages?dataformat="+JSON.stringify(a)})
				return
			}
		}
	}
</script>

<style>
.tab_nav{
	background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tab_nav  .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}
	.active {
		position: relative;
		color: #13d5f6;
	}
	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 8rpx;
		background-color:  #13d5f6;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}
	.newBxBox{
		margin-top: 25rpx;
		background-color: white;
	}
	.top{
		height: 50rpx;
		line-height: 50rpx;
		color: gray;
		padding-left: 20rpx;
	}
	.container{
		/* height: 200rpx; */
		border: 1px solid #ccc;
		display: flex;
		margin-bottom: 20rpx;
	}
	.container-left{
		width: 150rpx;
		border: 1px solid #ccc;
	}
	.container-right{
		width: 538rpx;
		display: flex;
	}
</style>
